<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="assets">
					<div class="top">
						<div class="top_title">{{$t('Assets.v1')}}</div>
						<van-row style="padding-top: 10px;">
							<van-col span="12">
								<p>{{parseFloat(usdt).toFixed(5).slice(0,-1)}} USDT</p>
								<p>&asymp;&nbsp;{{parseFloat(usdtCny).toFixed(5).slice(0,-1)}} CNY</p>
							</van-col>
						</van-row>
						<div class="top_my">
							<div style="text-align: right;">
								<img src="../assets/images/Assets-1.png" width="30" @click="$router.push({name:'Mine'})">
							</div>
						</div>
					</div>
					<div class="mid">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="(item,index) of accounts" :key="index" :style="{background:item.bg,background:item.bg2}">
									<div class="card" :class="'card' + index">
										<div class="card_top">
											<p>
												<span v-text="item.name"></span>
												<span style="float: right;" v-if="item.typeName == 'Estate' || item.typeName == 'one' || item.typeName == 'two' || item.typeName == 'three' ">1 Estate = {{parseFloat(item.price).toFixed(5).slice(0,-1)}} USDT</span>
												<span style="float: right;" v-if="item.typeName == 'USDT'">1 USDT = {{parseFloat(item.price).toFixed(5).slice(0,-1)}} CNY</span>
											</p>
											<p v-if="item.typeName == 'Estate'">{{parseFloat(walletNum).toFixed(5).slice(0,-1)}} {{ item.typeName }}</p>
											<p v-if="item.typeName == 'Estate'">{{$t('Assets.v13')}} &asymp; {{parseFloat(walletNumCny).toFixed(5).slice(0,-1)}} CNY</p>
											<p v-if="item.typeName == 'USDT'">{{parseFloat(usdtNum).toFixed(5).slice(0,-1)}} {{ item.typeName }}</p>
											<p v-if="item.typeName == 'USDT'">{{$t('Assets.v13')}} &asymp; {{parseFloat(usdtNumCny).toFixed(5).slice(0,-1)}} CNY</p>
											<p v-if="item.typeName == 'one'">{{parseFloat(phaseoneNum).toFixed(5).slice(0,-1)}} Estate</p>
											<p v-if="item.typeName == 'one'">{{$t('Assets.v13')}} &asymp; {{parseFloat(phaseoneNumCny).toFixed(5).slice(0,-1)}} CNY</p>
											<p v-if="item.typeName == 'two'">{{parseFloat(phasetwoNum).toFixed(5).slice(0,-1)}} Estate</p>
											<p v-if="item.typeName == 'two'">{{$t('Assets.v13')}} &asymp; {{parseFloat(phasetwoNumCny).toFixed(5).slice(0,-1)}} CNY</p>
											<p v-if="item.typeName == 'three'">{{parseFloat(phasethreeNum).toFixed(5).slice(0,-1)}} Estate</p>
											<p v-if="item.typeName == 'three'">{{$t('Assets.v13')}} &asymp; {{parseFloat(phasethreeNumCny).toFixed(5).slice(0,-1)}} CNY</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="btm">
						<van-tabs v-model="active" background="transparent" color="#30c694" title-inactive-color="#848cab" title-active-color="#FFFFFF" swipeable animated>
							<van-tab :title="$t('Assets.v14')">
								<div class="btm_card">
									<p class="btm_title" v-if="index == 1">USDT</p>
									<p class="btm_title" v-if="index == 2">Estate</p>
									<p class="btm_title" v-if="index == 3">Estate</p>
									<p class="btm_title" v-if="index == 4">Estate</p>
									<p class="btm_title" v-if="index == 5">Estate</p>
									<div class="btm_content" v-if="index == 1">
										<div class="content_1">
											<div>
												<p>{{$t('Assets.v2')}}</p>
												<p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum)).toFixed(5).slice(0,-1)}}
												</p>
											</div>
										</div>
										<div class="content_2">
											<div>
												<p>{{$t('Assets.v3')}}</p>
												<p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
										<div class="content_3">
											<div>
												<p>{{$t('Assets.v4')}}</p>
												<p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
									</div>
									<div class="btm_content" v-if="index == 2">
										<div class="content_1">
											<div>
												<p>{{$t('Assets.v5')}}</p>
												<p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum) + Number(transferNum.num)).toFixed(5).slice(0,-1)}}
												</p>
											</div>
										</div>
										<div class="content_2">
											<div>
												<p>{{$t('Assets.v6')}}</p>
												<p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
										<div class="content_3">
											<div>
												<p>{{$t('Assets.v7')}}</p>
												<p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
									</div>
									<div class="btm_content" v-if="index == 3">
										<div class="content_1">
											<div>
												<p>{{$t('Assets.v2')}}</p>
												<p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum)).toFixed(5).slice(0,-1)}}
												</p>
											</div>
										</div>
										<div class="content_2">
											<div>
												<p>{{$t('Assets.v3')}}</p>
												<p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
										<div class="content_3">
											<div>
												<p>{{$t('Assets.v4')}}</p>
												<p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
									</div>
									<div class="btm_content" v-if="index == 4">
										<div class="content_1">
											<div>
												<p>{{$t('Assets.v2')}}</p>
												<p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum)).toFixed(5).slice(0,-1)}}
												</p>
											</div>
										</div>
										<div class="content_2">
											<div>
												<p>{{$t('Assets.v3')}}</p>
												<p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
										<div class="content_3">
											<div>
												<p>{{$t('Assets.v4')}}</p>
												<p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
									</div>
									<div class="btm_content" v-if="index == 5">
										<div class="content_1">
											<div>
												<p>{{$t('Assets.v2')}}</p>
												<p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum)).toFixed(5).slice(0,-1)}}
												</p>
											</div>
										</div>
										<div class="content_2">
											<div>
												<p>{{$t('Assets.v3')}}</p>
												<p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
										<div class="content_3">
											<div>
												<p>{{$t('Assets.v4')}}</p>
												<p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab :title="$t('Assets.v8')">
								<div class="btm_card">
									<div v-show="list.length">
										<div class="weui-flex vux-1px-b" v-for="(item,index) of list" :key="index">
											<div class="weui-flex__item">
												<div class="type">{{item.type}}</div>
												<div>{{item.dateTime}}</div>
											</div>
											<div class="val rise2" v-show="item.detailType == 1" style="float: right;margin-top: -30px;">
												+{{parseFloat(item.num).toFixed(5).slice(0,-1)}}
											</div>
											<div class="val fall2" v-show="item.detailType == 2" style="float: right;margin-top: -30px;">
												-{{parseFloat(item.num).toFixed(5).slice(0,-1)}}
											</div>
										</div>
										<van-pagination v-model="current" :total-items="total" :items-per-page="size" :page-count="pages" mode="simple" @change="page(current)" />
									</div>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast, Dialog, Notify } from "vant";
	import { mine } from "./../utils/api";
	let _this;
	export default {
		data() {
			return {
				active: 0,
				cny: 0,
        usdt: 0,
        usdtCny: 0,
				usdtNum: 0,
				walletNum: 0,
				phaseoneNum: 0,
				phasetwoNum: 0,
				phasethreeNum: 0,
				usdtNumCny: 0,
				walletNumCny: 0,
				phaseoneNumCny: 0,
				phasetwoNumCny: 0,
				phasethreeNumCny: 0,
				index: 1,
				transferNum: [],
				list: [],
				size: 10, // 每页数量
				current: 1, // 当前页码
				total: 0, // 总条数
				pages: 12, // 总页数
				tabs: [this.$t('Assets.v1'), this.$t('Assets.v10')],
				accounts: [{
					name: this.$t('Assets.v12'),
					bg: "linear-gradient(#b168ff, #796bff)",
					bg2: "-webkit-linear-gradient(#b168ff, #796bff)",
					url: "url(../assets/images/Assets-2.png)",
					typeName: 'USDT',
					usdt: 0,
					cny: 0,
					freezeNum: 0,
					availableNum: 0,
					price: 0
				}, {
					name: this.$t('Assets.v15'),
					bg: "linear-gradient(#ff7153, #feb278)",
					bg2: "-webkit-linear-gradient(#ff7153, #feb278)",
					url: "url(../assets/images/Assets-5.png)",
					typeName: 'Estate',
					usdt: 0,
					cny: 0,
					freezeNum: 0,
					availableNum: 0,
					price: 0
				},
//				{
//					name: this.$t('Assets.v16'),
//					bg: "linear-gradient(#b168ff, #796bff)",
//					bg2: "-webkit-linear-gradient(#b168ff, #796bff)",
//					url: "url(../assets/images/Assets-2.png)",
//					typeName: 'one',
//					usdt: 0,
//					cny: 0,
//					freezeNum: 0,
//					availableNum: 0,
//					price: 0
//				}, {
//					name: this.$t('Assets.v17'),
//					bg: "linear-gradient(#ff7153, #feb278)",
//					bg2: "-webkit-linear-gradient(#ff7153, #feb278)",
//					url: "url(../assets/images/Assets-5.png)",
//					typeName: 'two',
//					usdt: 0,
//					cny: 0,
//					freezeNum: 0,
//					availableNum: 0,
//					price: 0
//				}, {
//					name: this.$t('Assets.v18'),
//					bg: "linear-gradient(#b168ff, #796bff)",
//					bg2: "-webkit-linear-gradient(#b168ff, #796bff)",
//					url: "url(../assets/images/Assets-2.png)",
//					typeName: 'three',
//					usdt: 0,
//					cny: 0,
//					freezeNum: 0,
//					availableNum: 0,
//					price: 0
//				}
				],
				poolNum: 0
			};
		},
		beforeCreate() {
			_this = this;
		},
		created() {},
		mounted() {
			var swiper = new Swiper(".swiper-container", {
				grabCursor: true,
				centeredSlides: true,
				slidesPerView: "1.05",
				coverflowEffect: {
					rotate: 0,
					stretch: 0,
					depth: 100,
					modifier: 1,
					slideShadows: true
				},
				on: {
					slideChangeTransitionEnd: function() {
						_this.index = this.activeIndex + 1
						_this.bill();
						_this.accounNum();
						_this.current = 1;
					}
				}
			});
			this.asset();
			this.bill();
			this.accounNum();
		},
		methods: {
			asset() { // 顶部资产
				mine.getAsset().then(res => {
					if(res.code == 200) {
						this.usdtCny = res.data.sumCnyNum;
						this.usdtNumCny = res.data.usdtNumCny;
						this.walletNumCny = res.data.walletNumCny;
						this.phaseoneNumCny = res.data.phaseoneNumCny;
						this.phasetwoNumCny = res.data.phasetwoNumCny;
						this.phasethreeNumCny = res.data.phasethreeNumCny;
						this.usdt = res.data.sumUsdtNum;
						this.usdtNum = res.data.usdtNum;
						this.walletNum = res.data.walletNum;
						this.phaseoneNum = res.data.phaseoneNum;
						this.phasetwoNum = res.data.phasetwoNum;
						this.phasethreeNum = res.data.phasethreeNum;
					}
				});
			},
			bill() { // 账户流水
				let param = this.qs.stringify({
					'id': this.indexFormat(this.index),
					'current': this.current,
					'size': this.size
				})
				this.axios.post(process.env.API_HOST + "my/account_flow", param).then(res => {
					this.list = res.data.data.records;
					this.total = res.data.data.total;
					this.pages = res.data.data.pages;
				});
			},
			accounNum() {
				// 账户数量
				this.axios.get(process.env.API_HOST + "my/wallet_account/" + this.index).then(res => {
					if(res.data.code == 200) {
						this.transferNum = res.data.data;
						this.accounts[this.index - 1].usdt = res.data.data.usdt;
						this.accounts[this.index - 1].cny = res.data.data.cny;
						this.accounts[this.index - 1].freezeNum = res.data.data.freezeNum;
						this.accounts[this.index - 1].availableNum = res.data.data.availableNum;
						this.accounts[this.index - 1].price = res.data.data.price;
					}
				});
			},
			page(current) {
				this.current = current;
				this.bill();
			},
			indexFormat(i) {
				switch(Number(i)) {
					case 3:
						return 11;
						break;
					case 4:
						return 12;
						break;
					case 5:
						return 13;
						break;
					default:
						return i;
						break;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay {
		background: #FFFFFF;
	}

	.assets {
		.top {
			position: relative;
			padding: 10px;
			.top_title {
				font-size: 14px;
				margin-bottom: 5px;
			}
			.top_count {
				font-size: 17px;
			}
			.top_my {
				position: absolute;
				right: 20px;
				top: 10px;
			}
		}
		.mid {
			font-size: 16px;
			padding-bottom: 20px;
			.card {
				position: relative;
				.card_top {
					padding: 20px;
					p:first-child {
						margin-bottom: 15px;
					}
				}
				.card_btm {
					display: flex;
					text-align: center;
					padding: 10px 0;
					background: rgba(244, 244, 244, 0.2);
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;
					div {
						flex: 1;
					}
					span {
						position: relative;
						top: 1px;
					}
				}
			}
			.card0 {
				background: url(../assets/images/Assets-2.png);
				background-position: center;
				background-size: cover;
			}
			.card1:after {
				background: url(../assets/images/Assets-5.png);
				background-position: center;
				background-size: cover;
				opacity: 0.5;
				filter: alpha(opacity=50);
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: -1;
			}
			.card2:after {
				background: url(../assets/images/Assets-6.png);
				background-position: center;
				background-size: cover;
				opacity: 0.5;
				filter: alpha(opacity=50);
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: -1;
			}
			.card1 {
				background: url(../assets/images/Assets-5.png);
				background-position: center;
				background-size: cover;
			}
			.card2 {
				background: url(../assets/images/Assets-2.png);
				background-position: center;
				background-size: cover;
			}
			.card3 {
				background: url(../assets/images/Assets-5.png);
				background-position: center;
				background-size: cover;
			}
			.card4 {
				background: url(../assets/images/Assets-2.png);
				background-position: center;
				background-size: cover;
			}
		}
		.btm {
			.btm_card {
				border-top: 1px solid #262b3f;
				// border-bottom: 1px solid #262b3f;
				padding: 10px;
				.btm_title {
					padding: 10px 0;
				}
				.btm_content {
					display: flex;
					div {
						flex: 1;
						p:first-child {
							color: #5f647a;
						}
						p {
							color: #8188a7;
							text-align: center;
						}
					}
					.content_1 {
						p {
							text-align: left;
						}
					}
					.content_3 {
						p {
							text-align: right;
						}
					}
				}
			}
		}
		.swiper-container {
			width: 100%;
		}
		.swiper-slide {
			border-radius: 15px;
			/*background: -webkit-linear-gradient(#b168ff, #796bff);*/
			/* Safari 5.1 - 6.0 */
			/*background: linear-gradient(#b168ff, #796bff);*/
			/* 标准的语法 */
			height: 100%;
			width: 300px;
		}
		.tab_transparent {
			/*visibility: hidden;*/
			display: none;
		}
	}

	/deep/ .van-tabs__wrap {
		right: initial;
		padding-left: 5px;
	}

	.weui-flex {
		font-size: 12px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		color: #5f647a;
		.type {
			color: #fff;
		}
		.val {
			padding: 8px 0 0;
			font-size: 13px;
		}
	}

	/deep/ .vux-1px-b:after {
		border-bottom: 1px solid #262b3f !important;
	}

	.rise2 {
		color: #30c694;
	}

	.fall2 {
		color: #fa4a61;
	}

	/deep/ .van-pagination__item--disabled,
	.van-pagination__item--disabled:active {}

	/deep/ .van-pagination__item {
		color: #30c694;
	}

	/deep/ .van-pagination__item:active {
		background: #30c694;
		color: #fff;
	}

	/deep/ .van-pagination__item {
		background: none !important;
	}

	/deep/ .van-tab {
		padding: 0 17px;
	}
</style>
